<template>
  <div class="production-scheduling-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span class="header-title">生产排产</span>
        </div>
      </template>

      <!-- 搜索和筛选区域 -->
      <div class="filter-area">
        <el-form :model="formData" label-width="100px" inline>
          <el-row :gutter="24">
            <!-- 计划编号输入框 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="计划编号" prop="planCode">
                <el-input placeholder="请输入计划编号" size="large" v-model="formData.planCode" clearable />
              </el-form-item>
            </el-col>

            <!-- 计划名称输入框 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="计划名称" prop="planName">
                <el-input placeholder="请输入计划名称" size="large" v-model="formData.planName" clearable />
              </el-form-item>
            </el-col>

            <!-- 订单编号输入框 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="订单编号">
                <el-input placeholder="请输入产品编号" size="large" v-model="formData.salesOrderId" clearable />
              </el-form-item>
            </el-col>
          </el-row>



          <el-row :gutter="20">
            <!-- 开始时间选择器 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="开始时间" prop="startDate">
                <el-date-picker type="datetime" placeholder="选择日期" v-model="formData.startDate" size="large"
                  value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
            </el-col>

            <!-- 结束时间选择器 -->
            <el-col :span="8" :offset="0">
              <el-form-item label="结束时间" prop="endDate">
                <el-date-picker type="datetime" placeholder="选择日期" v-model="formData.endDate" size="large"
                  value-format="YYYY-MM-DD HH:mm:ss" />
              </el-form-item>
            </el-col>

            <!-- 操作按钮 -->
            <el-col :span="8" :offset="0" style="padding-left: 50px;">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="info" :plain="true" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 排产表格区域 -->
      <div class="scheduling-table">
        <!-- 数据表格 -->
        <el-table :data="page.records" style="width: 100%" border highlight-current-row>

          <!-- 计划编号列（可点击查看详情） -->
          <el-table-column label="计划编号" prop="planCode">
            <template #default="{ row }">
              <el-link type="primary" @click.stop="openDetailDialog(row)">{{ row.planCode }}</el-link>
            </template>
          </el-table-column>

          <!-- 计划名称列 -->
          <el-table-column label="计划名称" prop="planName" />

          <!-- 订单编号列 -->
          <el-table-column label="订单编号" prop="salesOrderId" />

          <!-- 计划类型列 -->
          <el-table-column label="计划类型">
            <template #default="{ row }">
              {{ formatPlanType(row.planType) }}
            </template>
          </el-table-column>

          <!-- 计划开始日期列 -->
          <el-table-column label="计划开始日期" prop="startDate" />

          <!-- 计划结束日期列 -->
          <el-table-column label="计划结束日期" prop="endDate" />

          <!-- 计划状态列 -->
          <el-table-column label="计划状态">
            <template #default="{ row }">
              {{ formatPlanStatus(row.planStatus) }}
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <el-table-column label="操作" width="180" fixed="right" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleScheduling(row)">排产</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination @current-change="loadData" v-model:currentPage="page.current" :page-sizes="[2, 4, 6, 8, 10]"
          :page-size="page.size" :total="page.total" background>
        </el-pagination>

        <!-- 表单弹窗 -->
        <el-dialog :title="dialogTitle" v-model="dialogVisible" width="60%" :destroy-on-close="true"
        @closed="handleDialogClosed">
          <router-view @ref-table="refTable" :data="currentRow" ></router-view>
        </el-dialog>
      </div>

      <!--gantt-chart-->
      <!-- <section class="my-gantt">
        <div id="gantt_here" class="gantt-container"></div>
      </section> -->
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, reactive, watchEffect, defineExpose } from 'vue'
import { useRouter } from 'vue-router'
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import demoData from './ganttData.json'
import request from '@/api/request.js'

const router = useRouter()

// const data = reactive({})
// //初始化甘特图
// const initGantt = () => {
//   gantt.config.grid_width = 350
//   gantt.config.add_column = false //添加符号

//   //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
//   gantt.config.autofit = false
//   gantt.config.row_height = 60
//   gantt.config.bar_height = 34
//   // gantt.config.fit_tasks = true //自动延长时间刻度，以适应所有显示的任务
//   gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务
//   // gantt.config.xml_date = '%Y-%m-%d' //甘特图时间格式
//   gantt.config.readonly = true //是否只读
//   gantt.i18n.setLocale('cn') //设置语言
//   gantt.init('gantt_here')
//   gantt.parse(demoData)
// }

// onBeforeMount(() => { })
// onMounted(() => {
//   initGantt()
// })
// watchEffect(() => { })
// defineExpose({
//   ...toRefs(data)
// })

// 格式化计划类型显示
const formatPlanType = (type) => {
  if (!type) return '-'
  const typeMap = {
    '1': '销售订单',
    '2': '库存计划'
    // 可以添加其他映射关系
  }
  return typeMap[type] || type
}

// 格式化计划状态显示
const formatPlanStatus = (status) => {
  if (!status) return
  const statusMap = {
    '1': '未开始',
    '2': '生产中',
    '3': '已完成',
    '4': '已取消'
    // 可以添加其他映射关系
  }
  return statusMap[status] || status
}

// 分页数据
const page = ref({
  current: 1,    // 当前页码
  size: 10,      // 每页显示条数
  total: 0,      // 总条数
  records: []    // 当前页数据
})

// 表单数据
const formData = ref({})

// 当前选中行
const currentRow = ref(null)
// 对话框可见性
const dialogVisible = ref(false)
// 对话框标题
const dialogTitle = ref('')

// 加载数据
const loadData = () => {
  // 构造查询参数
  const params = {
    current: page.value.current,
    size: page.value.size,
    ...formData.value
  }

  request({
    url: '/production/plan/page',
    method: 'GET',
    params
  }).then(res => {
    page.value = res.data
    console.log(page.value)
  })
}

// 初始化加载数据
loadData()

// 刷新表格数据
const refTable = () => {
  dialogVisible.value = false
}

// 搜索处理
const handleSearch = () => {
    page.value.current = 1  // 搜索时重置到第一页
    loadData()
}

// 重置表单
const resetForm = () => {
    formData.value = {}
    handleSearch()  // 重置后重新加载数据
}

// 处理弹窗关闭
const handleDialogClosed = () => {
    router.push('/production/schedule')
    loadData()
}

//查看详情
let openDetailDialog = (row) => {
  dialogTitle.value = "生产排产"
  currentRow.value = row
  dialogVisible.value = true
  router.push("/production/schedue/list")
}

//处理排产
let handleScheduling = (row) => {
  dialogTitle.value = "生产排产"
  currentRow.value = row
  dialogVisible.value = true
  router.push("/production/schedue/get")
  
}


</script>

<style scoped>
.production-scheduling-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;

}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.filter-area {
  margin-bottom: 20px;
}

.action-buttons {
  margin-bottom: 20px;
}

.scheduling-table {
  margin-bottom: 20px;
}

.pagination-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.view-toggle {
  margin: 20px 0;
  text-align: center;
}

.gantt-chart,
.calendar-view {
  margin-top: 20px;
  height: 600px;
  border: 1px solid var(--el-border-color-light);
  border-radius: 4px;
}

.my-gantt {
  height: 800px;
  width: 100vw;

  .gantt-container {
    width: 100%;
    height: 100%;
  }
}
</style>